<template>
  <div>
    <div v-if="list[0]">
      <button @click="addStudent">点击</button>
      <button @click="out">登出</button>
      <h2>{{ $route.params.userName }}</h2>
      <!-- <h2>{{ data }}</h2> -->
      <h2>{{ data[0].name }}</h2>
      <!-- 这里不要把所有的列的width都设置，要不然会出现空白的列，是由组件自动填充的 -->
      <div class="section" v-for="book in data" :key="book.name">
        <div class="top">
          <div class="top-left">
            <img
              src="../assets/sky.jpg"
              alt="sky"
              height="100px"
              width="100px"
            />
          </div>
          <div class="top-right">
            <a>{{ book.name }}</a>
            <p class="text">
              {{ book.details }}
            </p>
          </div>
        </div>
        <div class="bottom">
          <div class="icons">
            <i class="el-icon-view"></i><span class="viewNumber">0</span>
          </div>
          <div class="icons"><i class="el-icon-share"></i></div>
          <div class="icons"><i class="el-icon-more-outline"></i></div>
        </div>
      </div>
    </div>
    <!-- <div class="f1">
      <div v-for="book in studentList" :key="book.name">
        <ul>
          <li>{{ book.name }}</li>
          <li>{{ book.pwd }}</li>
          <li>{{ book.email }}</li>
        </ul>
      </div>
    </div> -->
    <div v-else>
      <p>请登录</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // data: [{ name: "hwj", pwd: 123, sure: 123, email: "bbcc" }],
      // data: [
      //   [
      //     { name: "wj", pwd: 123, sure: 123, email: "bbcc" },
      //     { name: "hwj", pwd: 123, sure: 123, email: "bbcc" },
      //   ],
      // ],
      // data: [
      //   { name: "wj", pwd: 123, sure: 123, email: "bbcc" },
      //   { name: "hwj", pwd: 123, sure: 123, email: "bbcc" },
      // ],
      data: [],
    };
  },
  computed: {
    list() {
      return this.$store.state.list;
      // console.log(this.$store.state.list);
    },
  },
  created() {
    this.pageInation();
  },

  methods: {
    out() {
      this.$store.commit("removeNote");
      this.$http.get("/").then((res) => {
        console.log(res.data);
        let data_info = res.data;
        this.data.push(...data_info);
      });
    },

    pageInation() {
      // let that = this;
      //每次点击更改页码值
      this.$http.get("sourcesList").then((res) => {
        console.log(res.data);
        let data_info = res.data;
        this.data.push(...data_info);
        console.log(this.data);
        console.log(this.data[0].name);
      });
    },
    // addStudent() {
    //   console.log(...this.data);

    //   this.data.some((val, i) => {
    //     console.log(val[i].name, val.pwd);
    //   });
    // },
    // number() {
    //   console.log(this.data.some((val) => val.name == 123 && val.pwd == 456));
    // },
    // addStudent() {
    //   this.$http.post("students", this.data).then(() => {
    //     this.$message({
    //       message: "录入成功",
    //       type: "success",
    //     });
    //   });
    // },
    // addStudent() {
    //   console.log(this.list);

    // let a = { name: "wj" };
    // this.$http.post("/", a).then((res) => {
    //   console.log(res.data);
    //     console.log(res.data);
    // let a = res.data;
    // this.data.push(a);
    // console.log(a);
    // console.log(a[0].username);
    // console.log(this.data[0].name);
    // this.data[0].name = a[0].username;
    // this.data.name(a[0].username);
    // console.log(a[0].username);
    // console.log(this.data);
    // console.log(this.data[0].name);
    // });
    // },
  },
};
</script>

<style>
</style>